import React, { Component } from 'react';
import { StyleSheet, PixelRatio, View } from "react-native";
import Echarts from 'native-echarts';
import { style } from '../../../theme/style';
import { GLOBAL } from '../../../config/global';

const scale = GLOBAL.SCALE;
const tabs = [{ value: '周', type: 1 }, { value: '月', type: 2 }, { value: '季', type: 3 }, { value: '年', type: 4 }]
export class EchartsComponent extends Component {

	constructor(props) {
		super(props);
		this.state = {
			type: '4', // tab选项卡
		}
	}

	_setIndex = (type) => {
		this.setState({
			type: type
		});
		this.props.setType(type);
	}

	_getData (option, data) {
		// this.setState({
		// 	echartsData: data
		// });

		let optionNew = {
			xAxis: {
				data: data.date
			},
			series: [{
				data: data.rightData,
				type: 'line'
			}, {
				data: data.leftData,
				type: 'line'
			}]
		}
		return Object.assign({}, option, optionNew);
	}


	render () {
		const option = {
			title: {
				show: false
			},
			grid: {
				show: true,
				left: '10%',
				right: '10%',
				top: '5%',
				bottom: '10%',
			},
			tooltip: {
				show: true
			},
			color: ['#2F7BFF', '#EE5D5D'],
			xAxis: {
				type: 'category',
				data: []
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: [],
				type: 'line',
			}]
		};
		let { type, echartsData } = this.state;
		let { data } = this.props;
		let optionBranch = this._getData(option, data);

		return (
			<View style={[styles.tuBox]}>
				{/* <View style={[styles.line, styles.tabBox]}>
				</View> */}
				{/* <View style={styles.tab}>
					{
						tabs.map((item, index) => {
							return (
								<TouchableOpacity key={index} onPress={() => { this._setIndex(item.type) }} style={[styles.tabNav, type == item.type ? styles.tabNavActive : '']}>
									<Text style={styles.tabNavText}>{item.value}</Text>
								</TouchableOpacity>
							)
						})
					}
				</View> */}

				<View style={[styles.chartBox]}>
					<View style={styles.height100}>
						<Echarts height={200} width={'100%'} option={optionBranch} />
					</View>
				</View>

			</View >

		)
	}
}

const styles = StyleSheet.create({
	line: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border
	},
	tuBox: {
		// flex: 1,
		backgroundColor: style.color.white
	},
	tabBox: {
		height: 40 * scale
	},
	chartBox: {
		marginTop: 50 * scale,
	},
	tab: {
		position: 'absolute',
		width: '100%',
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center'
	},
	tabNav: {
		flex: 1,
		marginLeft: 14 * scale,
		marginRight: 14 * scale
	},
	tabNavActive: {
		borderBottomWidth: 2 * scale,
		borderStyle: 'solid',
		borderBottomColor: style.color.themeColor,
	},
	tabNavText: {
		lineHeight: 40 * scale,
		textAlign: 'center'
	},
	height100: {
		width: '100%',
		height: 220 * scale,
		paddingLeft: 15 * scale,
		backgroundColor: style.color.white
	},
})